<template>
    <div>
        <div class="mem-search-item-thr-item" v-for="(body , index) in interList" :key="index"
             @click="toInteDetail(body.orderId)">
            <div class="main_1">
                <p>{{name}}</p>
                <p>{{body.created}}</p>
            </div>
            <p class="p1">{{body.intergal}}积分</p>
            <img :src="getIcon('arrow_right')" alt="">
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
  import Public from '@/assets/js/public';

  export default {
    /** kebab-case */
    name: 'mem-search-item-thr-item',

    data() {
      return {};
    },
    props: {
      // 检测类型
      name: {
        type: String,
        required: true
      },
      // 检测类型 + 其他验证
      interList: {
        type: Array,
        required: true
      }
    },
    components: {},
    methods: {
      getIcon(icon) {
        return Public.ossImg + icon + '.svg';
      },
      toInteDetail(orderId) {
        // 跳转积分订单详情
        this.$router.push({name: 'menorderdetail', query: {orderId: orderId}});
      }
    },
    computed: {},
    watch: {
      // 监听具体数据变化，并做相应的处理
    },
    beforeCreate() {
      /** 可以在这加个loading事件，在加载实例时触发 */
      // 这个阶段实例的data、methods是读不到的
    },
    created() {}
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import "../../assets/stylus/main.styl";
    .main_1 p:first-child {
        word(14px, #666)
    }

    .main_1 p:last-child {
        word(10px, #666)
    }

    .main_1 {
        flex-y();
        align-items flex-start
        justify-content space-between;
        height 8vw;
        flex 1;
    }

    .p1 {
        word(16px, #666);
    }

    .mem-search-item-thr-item {
        flex-x();
        bor-t(#f5f5f5, 1px)
        height vw(46px)
        & img {
            width 4vw
        }
    }

    .flex-r
        flex-x()

    .flex-c
        flex-y()

    .center
        flex-center()

    .divider
        divider()

    .space
        space()
</style>
